<template>
  <div>
    <ul>
      <input v-model="addtodo" placeholder="添加" />
      <button @click="add">添加</button>
      <li v-for="(arr, id) in arr" :key="id">
        {{ arr.name }}
        <p>
          <button @click="del(id)">删除</button>
          <button @click="edit(id)">修改</button>
          <button>查找</button>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  setup() {
    // 添加
    let addtodo = ref("");
    let arr = reactive([
      { id: 1, name: "张三" },
      { id: 2, name: "李四" },
      { id: 3, name: "王五" },
      { id: 4, name: "赵六" },
      { id: 5, name: "深七" },
    ]);
    // 添加方法
    function add() {
      console.log(addtodo.value);
      if (addtodo.value !== "") {
        arr.push({ id: arr.length + 1, name: addtodo.value });
        addtodo.value = "";
      }
      console.log(11);
    }
    // 点击删除
    function del(id) {
      arr.splice(id, 1);
    }
    // 修改
    function edit(id) {
      let newobj = prompt();
      if (newobj !== "" && newobj !== null) {
        arr[id].name = newobj;
      }
    }
    return {
      addtodo,
      arr,
      del,
      add,
      edit,
    };
  },
};
</script>

<style lang="scss" scoped></style>
